<template>
  <div>
    <mt-swipe :auto="4000">
        <!-- 将来谁使用此轮播图组件 谁为我们传递数据 -->
        <!-- 此时  lunbotuList 应该是父组件向子组件传值 来设置-->
      <mt-swipe-item v-for="item in lunbotuList" :key="item.img">
        <img :src="item.img" alt :class="{full:isfull}">
      </mt-swipe-item>
    </mt-swipe>
  </div>

  <!-- 分析 为什么 商品评论中的轮播图那么丑 -->
  <!-- 1， 首页中的图片 他的宽高都是使用了100% -->
  <!-- 2，在商品详情页面中 轮播图的图片如果也使用宽高100%的话 页面不好看 -->
  <!-- 3，商品详情页面中的轮播图 期望高度是100% 但是宽度为自适应 -->
  <!-- 4，分析得到问题的原因 ：首页中的轮播图和详情中的轮播图 分歧点是宽度到底是100% 还是自适应 -->
  <!-- 5，既然这两个轮播图其他方面都是没有冲突的 只是宽度有分歧 那么 我们可以定义一个属性 让使用轮播图的调用者手动指定是否为100%宽度 -->
</template>
<script>
export default {
    props:["lunbotuList","isfull"]
};
</script>
<style lang="scss" scoped>
.mint-swipe {
  height: 200px;
  .mint-swipe-item {
    text-align: center;
    // &:nth-child(1) {
    //   background-color: red;
    // }

    // &:nth-child(2) {
    //   background-color: blue;
    // }

    // &:nth-child(3) {
    //   background-color: yellow;
    // }

    img {
      width: 100%;
      height: 100%;
    }
  }
}
// .full{
//   height: 100%;
// }
</style>

